JSX

React以Component為基礎，我們把相關的介面、功能整合在一起就是一個Component。JSX是一種語法糖，XML-like的Javascript語法延伸，它讓我們可以比較直覺的撰寫React Component，而我們需要透過Babel把JSX轉譯成真正的Javascript。當然寫React Component也可以不用JSX，可是看起來就會比較複雜、不直覺，透過Babel也可以讓我們直接使用ES6+的語法，所以使用這些工具Z>B。(不想把每一種寫法都列出來，這樣很容易在一開始就覺得寫法太多很難懂，所以分享的系列文章，都還是會採用JSX、ES6的語法喔！)

(1)JSX基本寫法

const ele = <h1>Hello, world!</h1>;

這邊使用ES6 const的語法宣告，可以參考let一起做比較。

上面的語法透過Babel線上轉譯，我們可以得到編譯後的js，JSX產生React elements

var ele = React.createElement(
  "h1",             // HTML元素 或是 React Component，這裏是h1
  null,             // 屬性值，用物件表示，這裏沒有傳屬性
  "Hello, world!"   // 元素子元素，這裏只有文字
);

轉譯前的code簡潔很多，當Component越來越複雜，div裡面又包覆其他子元件，子元件還有子元件的時候，就越能體會JSX帶來的好處喔！

(2)允許使用{}包住JavaScript Expression

可以利用function，帶入我們要顯示的string

function getName() {
  return 'World';
}
const ele = <h1>Hello, {getName()}!</h1>;

上面function回傳一個string，也可以是回傳另一個JSX，如下：

function getName() {
  return <span>World</span>;
}
const ele = <h1>Hello, {getName()}!</h1>;

(3)設定JSX屬性 (Attribute)

JSX就像XML一樣，除了可以設定children，也可以設定attribute。而attribute代入的內容可以是string，也可以是一個object。

// 傳入字串
const ele1 = <div name="Allen" />;

// 傳入物件
const ele2 = <div user={ name: 'Allen', age: 30 } />;

JSX雖然某部分跟HTML的tag element很像，但它是Javascript的延伸語法，為了和HTML屬性有所區別，React DOM在屬性的命名上採用camelCase方式。例如：

const ele1 = <div className="wrap" />;       // class -> className
const ele2 = <div tabIndex="0" />;           // tabindex -> tabIndex
const ele3 = <label htmlFor="checkbox" />;   // for -> htmlFor

另外，style設定也是一個需要注意的地方，和一般直接寫CSS style不同，JSX元件style設定值為一個Object，裡面的CSS屬性也是用camelCase方式命名。第一個{}是表示JSX傳入Javascript Expression，第二個{}表示是Object。例如：

// font-size => fontSize
const ele = <div name="Allen" style={{ color: '#999', fontSize: '24px'}}  />;

(4)設定JSX子元素 (Children)

一開始我們有示範，在JSX裡面顯示Hello World，除了字串它也可以設定其他子元件，而當沒有其他子元件時，通常用 /> 的表示方式。

// 包含children
const ele1 = (
        <div>
            <h1>Hello,</h1>
            <h2>Allen</h2>
        </div>
    );

// 沒有children，空一格用 />結尾
const ele2 = <img src={user.avatarUrl} />;

今天就先介紹到這邊，了解JSX會對寫React有很大的幫助，而且越寫會越發現這樣的格式很直覺很容易上手，UI架構一目了然！

參考

React官網 Introducing JSX